<template>
	<view class="container">
		<view class="main">
			<view class="img">
				<image src="http://images.linglinggong.net/icon1/01.png" mode="aspectFill"></image>
			</view>
			<!-- 手机号登录 -->
			<!--  #ifndef  MP-WEIXIN -->
			<view class="phone-login">
				<view class="img">
					<image src="http://images.linglinggong.net/icon1/02.png" mode="aspectFill"></image>
					<text>手机</text>
				</view>
				<view class="input">
					<input type="number" maxlength="11" v-model="mobile" placeholder="请输入您的手机号"
						placeholder-class="plaho" />
				</view>
				<view class="img">
					<image src="http://images.linglinggong.net/icon1/03.png" mode="aspectFill"></image>
					<text>验证码</text>
				</view>
				<view class="input">
					<input type="number" maxlength="6" v-model="checkCode" placeholder="请输入您的验证码"
						placeholder-class="plaho" />
					<view v-if="!verificationFlag" style="font-weight: 900;" class="no-send" @click="handleSendCode">
						发送验证码</view>
					<view v-if="verificationFlag" style="color: #a2a2a2;">已发送（{{ count }}S）</view>
				</view>
			</view>
			<!-- 登录按钮 -->
			<view class="button" @click="handleLogin">同意协议并注册/登录</view>
			<!-- 第三方登录 -->
			<view class="other-login">
				<text>第三方登录</text>
				<view>
					<image src="http://images.linglinggong.net/icon1/13.png" mode="aspectFill"
						@click="handleWeChatLogin"></image>
					<image v-if="appleOauth" :style="{'margin-left': '40rpx'}"
						src="https://images.linglinggong.net/static/icon1/12.png" mode="aspectFill"
						@click="handleAppleLogin"></image>
				</view>
			</view>
			<!-- #endif -->
			<!--  #ifdef  MP -->
			<button class="loginBtn" v-if="agree||[undefined,''].includes(agree) " open-type="getPhoneNumber"
				@getphonenumber="onGetPhoneNumber">
				<!-- 	<image class="wx-icon" src="https://images.linglinggong.net/static/wx.png" mode=""></image> -->
				<text>一键授权登录</text>
			</button>
			<!-- 		<button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">获取手机号码</button> -->
			<button class="loginBtn" v-else @click="weixinLogin()">
				<!-- 	<image class="wx-icon" src="https://images.linglinggong.net/static/wx.png" mode=""></image> -->
				<text>一键授权登录</text>
			</button>
			<button class="noBtn" @click="toIndex">
				<!-- 	<image class="wx-icon" src="https://images.linglinggong.net/static/wx.png" mode=""></image> -->
				<text>暂不登录</text>
			</button>
			<!-- #endif -->
			<!-- 用户协议 -->
			<view class="user-agreement">
				<view class="article" style="margin-top: 50rpx;">
					<view class="text"
						style="display: flex;flex-direction: column;flex-wrap: wrap;justify-content: flex-start; text-align: left;">
						<view style="display: flex;justify-content: center;align-items: center;">
							<checkbox style="border-radius: 50% !important;zoom: 60%;" @click="handleSelect()">
							</checkbox>您知悉并同意平台 <text style="color: #F39B19"
								@click="handleOpenArticle(0)">《{{ detailService }}》 </text> 与 <text
								style="color: #F39B19" @click="handleOpenArticle(1)">《{{ detailPrivacyT }}》</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	// #ifdef MP-WEIXIN
	import WXBizDataCrypt from "@/common/WXBizDataCrypt.js";
	// #endif
	import unit from '../../libs/newUnit.js'
	import {
		baseURL
	} from '@/config/index.js'
	export default {
		data() {
			return {
				isSelect: false, //已选择同意协议
				detailPrivacyT: '隐私政策', //隐私标题
				detailService: '服务协议', //服务
				inviteCode: uni.getStorageSync('inviteUserId'), //邀请码
				timer: null, //验证码计时器
				count: 60, //验证码计时时间
				verificationFlag: false, // 是否发送过验证码
				mobile: "", //手机号
				checkCode: "", //验证码		
				loginType: 0, //1 微信 2 苹果
				id: '',
				oldCheckCode: '', //旧的验证码，防止误触登录
				wx_code: {
					openid: '',
					session_key: '',
					unionid: '',
					phoneNumber: ''
				},
				isShow: false,
				agree: uni.getStorageSync('agree'),
			}
		},
		onLoad(options) {
			// #ifdef MP
			// #endif
			this.isShow = true
			this.handleWeChatAuthorize()
			this.get_current_location()
			this.getArticleDetailP()
			this.getArticleDetailS()
			// this.getSetting() //注销登录的授权
		},
		methods: {
			// 获取banner,缓存起来
			async getConfigBanner(e) {
				let tempRegion
				tempRegion = '330783'
				tempRegion = uni.getStorageSync('region') ? uni.getStorageSync('region').slice(0, 6) : '330783'
				let res = await this.$fetch(this.$api.bannerByToken, {
					region: e ? e : tempRegion
				}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				uni.setStorageSync('configBanner', res.data)
			},
			goGuifan() {
				uni.navigateTo({
					url: './guiFan/guiFan'
				})
			},
			// 暂不登录 跳转首页
			toIndex() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			weixinLogin() {
				if (!this.agree) {
					uni.showToast({
						title: '无法生成账号，可浏览页面',
						icon: 'none'
					})
				}
			},
			onCancelClick() {
				this.isShow = false
				this.agree = uni.getStorageSync('agree')
			},
			onConfirmClick() {
				this.isShow = false
				this.agree = true
			},
			/* 微信小程序登录 */
			// #ifdef MP-WEIXIN
			/* 微信小程序登录 */
			/* 处理微信授权 */
			handleSelect() {
				this.isSelect = !this.isSelect
			},
			onGetPhoneNumber(e) {
				// if (!uni.getStorageSync('agree')) {
				// 	uni.showToast({
				// 		title: '无法生成账号，可浏览页面',
				// 		icon: 'none'
				// 	})
				// } else {
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权
					//拒绝授权后弹出一些提示  
					uni.showToast({
						title: '授权失败',
						icon: 'none'
					})
				} else { //允许授权  
					//e.detail.encryptedData //加密的用户信息  
					//e.detail.iv //加密算法的初始向量  时要用到  
					if (!this.isSelect) {
						uni.showToast({
							title: '请先阅读并勾选协议',
							icon: 'none'
						})
						return
					}
					let pc = new WXBizDataCrypt('wx7dedaad636ca78fe', this.wx_code.session_key); //wxXXXXXXX为你的小程序APPID
					let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
					console.log(9090, data);
					this.wx_code.phoneNumber = data.phoneNumber
					this.mpWx_login()
				}
				// }
			},
			handleWeChatAuthorize() {
				uni.login({
					provider: 'weixin',
					success: res => {
						let code = res.code
						uni.getUserInfo({
							provider: 'weixin',
							success: infoRes => {
								uni.setStorageSync('userInfo', infoRes.userInfo)
								console.log(2, code);
								this.getWxCode(code)
							}
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '授权失败',
							icon: 'none'
						})
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			async getWxCode(code) {
				let res = await this.$fetch(this.$api.wx_login_xcx, {
					code: code
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				let wx_code = res.data
				uni.setStorageSync('openid', res.data.openid)
				this.wx_code.session_key = wx_code.session_key
				this.wx_code.unionid = wx_code.unionid
				this.wx_code.openid = wx_code.openid
			},
			async mpWx_login() {
				console.log('二维码', this.inviteCode, uni.getStorageSync('wxChannel'))
				let adcode = uni.getStorageSync('region').slice(0, 6)
				let userInfo = uni.getStorageSync('userInfo')
				let loginRes = this.wx_code
				let obj = {
					checkCode: 1111, // 验证码
					id: loginRes.unionid, //uniid
					inviteCode: this.inviteCode,
					loginType: 3, //登录方式
					mobile: loginRes.phoneNumber, //获取的手机号
					nickName: userInfo.nickName, //用户名
					adcode: adcode, //地址code
					openid: loginRes.openid, //微信的openID
					channel: uni.getStorageSync('wxChannel'), //渠道
					userType: uni.getStorageSync('wxUserType'), //微信扫二维码用户类型
					lat: uni.getStorageSync('location')[0],
					lng: uni.getStorageSync('location')[1]
				}
				// return
				let res = await this.$fetch(this.$api.register, obj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				uni.setStorageSync('token', res.data.token)
				let resData = await this.$fetch(this.$api.updateUserOpenId, {
					token: uni.getStorageSync('token'),
					openId: this.wx_code.openid
				}, 'POST')
				// if(resData.code) return uni.showToast({
				// 	title: res.msg,
				// 	icon: 'none'
				// })
				console.log('更新成功或者失败', resData)
				this.getConfigBanner()
				this.getUserInfo()
				uni.showToast({
					title: '登录成功~',
					icon: 'none'
				})
			},
			// #endif
			// 点击
			handleSelect() {
				this.isSelect = !this.isSelect
			},
			// 获取文章详情
			async getArticleDetailP() {
				let res = await this.$fetch(this.$api.get_article_by_id, {
					id: 4
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.detailPrivacyT = res.data.articleTitle
			},
			// 获取文章详情
			async getArticleDetailS() {
				let res = await this.$fetch(this.$api.get_article_by_id, {
					id: 3
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.detailService = res.data.articleTitle
			},
			// 点击协议
			handleOpenArticle(flag) {
				if (flag == 0) {
					uni.navigateTo({
						url: '/pages/user-agreement/service-agreement'
					})
				} else if (flag = 1) {
					uni.navigateTo({
						url: '/pages/user-agreement/privacy-agreement'
					})
				}
			},
			// 用户点击了微信登录-> 获取微信授权信息-> 获取不到说明没有授权 -> 授权之后在获取
			handleWeChatLogin() {
				if (!this.isSelect) {
					uni.showToast({
						title: '请先阅读并勾选底部协议~',
						icon: 'none'
					})
					uni.pageScrollTo({
						scrollTop: 100,
						duration: 300
					})
					return
				}
				uni.showLoading({
					title: '登陆中...'
				})
				// 获取微信授权信息
				uni.getUserInfo({
					provider: 'weixin',
					success: (loginRes) => {
						// 获取微信授权信息后登录
						this.weChatDirectLogin(loginRes)
					},
					fail: (loginErr) => {
						// 微信登录失败 -> 未授权 
						// console.log('微信登录失败返回的数据：',loginErr)
						this.handleWxLoginAccess() // 授权
					}
				})
			},
			// 调微信登录 （原）
			async weChatDirectLogin(loginRes) {
				// console.log('id',loginRes.userInfo.unionId, )
				var pinf = plus.push.getClientInfo();
				var cid = pinf.clientid; //客户端标识 
				uni.setStorageSync('cid', cid)
				console.log('手机cid', uni.getStorageSync('cid'))
				let res = await this.$fetch(this.$api.login_by_id, {
					id: loginRes.userInfo.unionId,
					loginType: 1,
					cid: cid
				}, 'POST')
				// console.log('微信登录', res)
				uni.hideLoading()
				// return
				// 已注册，直接登录
				if (res.code == 0) {
					// 存储token
					uni.setStorageSync('token', res.data.token)
					uni.showToast({
						title: '登录成功~',
						icon: 'none'
					})
					this.getUserInfo()
				} else if (res.msg = '登录失败 请绑定手机号') {
					// 没有注册，先绑定手机号注册
					plus.nativeUI.toast("首次登陆，请先绑定手机号~");
					let register_obj = {
						avatar: loginRes.userInfo.avatarUrl,
						userName: loginRes.userInfo.nickName,
						unionId: loginRes.userInfo.unionId,
						sex: loginRes.userInfo.gender,
					}
					uni.setStorageSync('register_obj', register_obj)
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/bind-mobile/bind-mobile?id=' + loginRes.userInfo.unionId +
								'&loginType=' + 1
						})
					}, 0)
				} else {
					return
				}
				this.get_current_location()
			},
			// 微信登录授权
			handleWxLoginAccess() {
				uni.login({
					provider: 'weixin',
					success: (accessRes) => {
						this.handleWeChatLogin()
					},
					fail: (err) => {
						uni.showToast({
							title: '您已取消授权',
							icon: 'none'
						})
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			// 验证手机号格式是否正确
			checkLoginNameFormat(mobile) {
				let reg = /^[1][3456789][0-9]{9}$/
				if (!reg.test(mobile)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return false
				}
				return true
			},
			// 发送验证码
			async handleSendCode() {
				if (!this.checkLoginNameFormat(this.mobile)) return
				this.verificationFlag = true
				let res = await this.$fetch(this.$api.mobile_verification_code, {
					length: 6,
					mobile: this.mobile
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.timer = setInterval(() => {
					if (this.count == 0) {
						clearInterval(this.timer)
						this.verificationFlag = false
						this.count = 60
					} else {
						this.count = --this.count
					}
				}, 1000)
			},
			//手机登录
			async handleLogin() {
				clearTimeout(this.updateTimer)
				if (!this.isSelect) {
					uni.showToast({
						title: '请先阅读并勾选底部协议~',
						icon: 'none'
					})
					uni.pageScrollTo({
						scrollTop: 100,
						duration: 300
					})
					return
				}
				if (!this.checkCode) return uni.showToast({
					title: '请输入验证码~',
					icon: 'none'
				})
				let adcode = 330783
				let res = await this.$fetch(this.$api.login_by_mobile, {
					adcode: adcode,
					inviteCode: this.inviteCode,
					mobile: this.mobile,
					checkCode: this.checkCode
				}, 'POST')
				console.log(res.msg)
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// 存储 user_token
				uni.setStorageSync('token', res.data.token)
				this.token = res.data.token
				uni.showToast({
					title: '登录成功~',
					icon: 'none'
				})
				if (res.data.str == '1') {
					if (uni.getStorageSync('str') == '') {
						uni.setStorageSync('str', res.data.str)
					}
				} else if (res.data.str == '0') {
					uni.removeStorageSync("str")
				}
				uni.removeStorageSync("date")
				this.getUserInfo()
				this.getSetting()
				uni.setStorageSync('isAppListFlag', true)
			},
			// 获取当前用户信息
			async getUserInfo() {
				let res = await this.$fetch(this.$api.get_current_user, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				console.log('用户类型', res.data)
				// 注册用户
				if (res.data.userType == '-1') {
					console.log('未注册')
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/select-identity/select-identity'
						})
					}, 600)
					// 登录用户
				} else {
					let dataTime = new Date(new Date().setDate(new Date().getDate() + 20)); // 20天后的时间
					// 缓存的20天后的时间
					// let futrueYear = dataTime.getFullYear(),
					// 	futrueDate = dataTime.getDate(),
					// 	futrueMonth = dataTime.getMonth() + 1;
					// 要的是时间戳
					// `${futrueYear}-${futrueMonth}-${futrueDate} 00:00`
					let futrueDays = dataTime.getTime();
					uni.setStorageSync('futrueDays', futrueDays);
					console.log('已经注册')
					uni.setStorageSync('userInfo', res.data)
					uni.setStorageSync('userType', res.data.userType)
					uni.setStorageSync('userId', res.data.user.userId)
					uni.setStorageSync("level", res.data.user.level)
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/employer_benefits/employers_page'
						})
					}, 600)
				}
			},
			// 获取用户当前的经纬度
			get_current_location() {
				uni.getLocation({
					// #ifdef MP-WEIXIN || MP-TOUTIAO
					type: 'gcj02',
					// #endif
					success: (res) => {
						console.log(55, res);
						uni.setStorageSync('location', [res.latitude, res.longitude])
						this.getAdcode(res.latitude, res.longitude)
					},
					fail: (err) => {
						console.log('err', err);
					}
				})
			},
			// 判断用户是否授权
			getSetting() {
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.userLocation'] != undefined && res.authSetting[
								'scope.userLocation'] != true) { //非初始化进入该页面,且未授权
							uni.showModal({
								title: '是否授权当前位置',
								content: '需要获取您的地理位置，请确认授权，否则无法获取您所需数据',
								success: res => {
									if (res.cancel) {
										uni.showToast({
											title: '授权失败',
											icon: 'none',
											duration: 1000
										})
									} else if (res.confirm) {
										this.openSet()
									}
								}
							})
						} else {
							this.get_current_location()
						}
					}
				})
			},
			/* 打开设置 */
			openSet() {
				uni.openSetting({
					success: dataAu => {
						if (dataAu.authSetting["scope.userLocation"] == true) {
							uni.showToast({
								title: '授权成功',
								icon: 'success',
								duration: 1000
							})
							this.get_current_location()
						} else {
							uni.showToast({
								title: '授权失败',
								icon: 'none',
								duration: 1000
							})
						}
					}
				})
			},
			// 由经纬度查询街道的行政代码
			getAdcode(lat, lng) {
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
					data: {
						key: 'd73cc951a96637a251a9a2446b48ce9c',
						location: lng + ',' + lat
					},
					success: res => {
						let region = res.data.regeocode.addressComponent.towncode.slice(0, 9)
						console.log(999, region);
						uni.setStorageSync('region', region)
						console.log('登录页的经纬度', uni.getStorageSync('location'), '获取区域region', uni
							.getStorageSync('region'))
						if (uni.getStorageSync('token')) {
							this.upd_user(lat, lng, region) //修改	
						}
					}
				})
			},
			//更新用户位置
			async upd_user(lat, lng, region) {
				//经纬度保留6位小数
				lat = parseFloat(lat).toFixed(6)
				lng = parseFloat(lng).toFixed(6)
				region = region.slice(0, 9)
				console.log('更新用户位置', lat, lng, region)
				let res = await this.$fetch(this.$api.upd_user, {
					lat: lat,
					lng: lng,
					region: region
				}, 'POST')
				console.log('更新用户位置res', res)
			},
		}
	}
</script>
<style lang="less" scoped>
	page {
		background-color: #FFFFFF;
		height: 100vh;
	}

	.container {
		// border: 1px solid #000000;
		background-color: #FFFFFF;
		padding-top: var(--status-bar-height);
		height: calc(100vh - var(--status-bar-height));
		display: flex;
		justify-content: center;

		&>.main {
			padding: 0 80rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.loginBtn {
				width: 600rpx;
				height: 100rpx;
				font-weight: 500;
				margin: 0 auto;
				font-size: 34rpx;
				border-radius: 50rpx;
				background-color: #09BB07;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			&>.user-agreement {

				// position: fixed;
				// top: 1150rpx;
				// display: flex;
				// justify-content: center;
				// flex-direction: row;
				.article {
					text-align: center;
					width: 750rpx;

					.text {
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				&>.icon {
					icon {
						// margin-left: 30rpx;
						margin-right: 20rpx;
					}
				}
			}

			.img {
				margin: 80rpx 0;
				width: 242rpx;
				height: 248rpx;

				image {
					width: 242rpx;
					height: 248rpx;
				}
			}

			&>.phone-login {
				margin-bottom: 20rpx;

				&>.img {
					height: 42rpx;
					margin-bottom: 40rpx;
					display: flex;
					align-items: center;

					image {
						margin-right: 30rpx;
						width: 42rpx;
						height: 42rpx;
					}

					text {
						font-weight: bold;
					}
				}

				&>.input {
					width: 590rpx;
					margin-bottom: 40rpx;
					padding-bottom: 20rpx;
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid #F2F2F2;

					input {
						flex: 1;
						height: 40rpx;
						margin-left: 58rpx;
						border-radius: 0.5px;
						font-size: 14px;
						color: #402110;
						background: transparent;
					}

					.plaho {
						line-height: 40rpx;
						font-size: 14px;
						color: rgba(64, 33, 16, 0.30);
					}

					&>view {
						font-size: 12px;
						color: #F39B19;
					}
				}
			}

			&>.button {
				margin-bottom: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 520rpx;
				height: 80rpx;
				border: 2px solid #FFFFFF;
				border-radius: 23px;
				box-shadow: 0 0 0 1px #FCC928;
				background-color: #FCC928;

				&:active {
					opacity: 0.7;
				}
			}

			&>.other-login {
				// border: 1px solid #000000;
				position: relative;
				width: 590rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 60rpx;

				&::after {
					content: "";
					position: absolute;
					right: 0;
					top: 20rpx;
					width: 180rpx;
					height: 2rpx;
					background: #D2CAC6;
				}

				&::before {
					content: "";
					position: absolute;
					left: 0rpx;
					top: 20rpx;
					width: 180rpx;
					height: 2rpx;
					background: #D2CAC6;
				}

				&>text {
					// position: relative;
					height: 40rpx;
					margin-bottom: 30rpx;
					color: rgba(64, 33, 16, 0.50);
				}

				&>view {
					image {
						width: 70rpx;
						height: 70rpx;
					}
				}
			}
		}

		.mask {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, .5);
			z-index: 999;

			.yinsixieyi {
				overflow: scroll;
				margin: 50rpx auto;
				padding: 20rpx;
				width: 630rpx;
				height: 90vh;
				background: #FFFFFF;
				border-radius: 20rpx;
				z-index: 100;
			}

			.yinsixieyi-title {
				display: block;
				font-size: 40rpx;
				font-weight: bold;
				color: #010000;
				margin-top: 68rpx;
			}

			.yinsixieyi-info {
				margin: 48rpx 48rpx 0 48rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #010000;
				line-height: 48rpx;
			}

			.yinsixieyi-infos {
				margin-bottom: 48rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #010000;
				line-height: 48rpx;
			}

			.yinsixieyi-button {
				width: 534rpx;
				height: 78rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				margin-top: 12rpx;
				margin-bottom: 30rpx;
			}

			.yinsixieyi-button1 {
				width: 248rpx;
				height: 77rpx;
				border: 1rpx solid #787878;
				border-radius: 8rpx;
				text-align: center;
				line-height: 77rpx;
			}

			.yinsixieyi-button2 {
				width: 248rpx;
				height: 78rpx;
				background: #FDC928;
				border-radius: 8rpx;
				text-align: center;
				line-height: 77rpx;
			}
		}
	}

	.noBtn {
		width: 600rpx;
		height: 100rpx;
		font-weight: 500;
		margin: 30rpx auto;
		font-size: 34rpx;
		border-radius: 50rpx;
		background: #999;
		opacity: 0.8;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>